<template>
	<!-- 选择省市组件 -->
	<view class="comTime" @click="hideTime">
		<view class="popBox" @click.stop="">
			<image @click.stop="hideTime" src="./images/cha.png" mode="widthFix" class="cha"></image>
			<view class="tit">
				<text>选择地址</text>
			</view>
			<view class="content">
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in array[0]" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in array[1]" :key="index">{{item.name}}</view>
					</picker-view-column>
	<!-- 			<picker-view-column>
						<view class="item" v-for="(item,index) in array[2]" :key="index">{{item.name}}</view>
					</picker-view-column> -->
				</picker-view>
			</view>
			<view class="btns">
				<text class="err" @click.stop="hideTime">取消</text>
				<text class="succ" @click.stop="sendTime">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	import AllAddress from './data.js'
	export default {
		name: "comTime",
		props: {

		},
		data() {
			return {
				value: [0, 0, 0],
				array: [],
				indicatorStyle: `height: 50px;`
			};
		},
		mounted() {

		},
		created() {
			console.log(AllAddress);
			this.updateSourceDate()
		},
		methods: {
			bindChange(e) {
				if (e.detail.value[0] != this.value[0]) {
					this.value[0] = e.detail.value[0]
					this.value[1] = 0
					this.value[2] = 0
				} else if (e.detail.value[1] != this.value[1]) {
					this.value[0] = e.detail.value[0]
					this.value[1] = e.detail.value[1]
					this.value[2] = 0
				} else {
					this.value = e.detail.value
				}
				console.log(e.detail.value);
				console.log(this.value);
				this.updateSourceDate()
			},
			//初始化地区
			updateSourceDate() {
				this.array = []
				this.array[0] = AllAddress.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[1] = AllAddress[this.value[0]].city.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => {
					return {
						name: obj
					}
				})
				// console.log(this.array);
				// return this
			},
			hideTime() {
				this.$emit('hideTime')
			},
			sendTime() {

				// console.log(this.array);
				// console.log(this.value[0]);
				// console.log(this.array[1][this.value[1]].name);



				this.$emit('sendTimeFun', {
					value: `${this.array[1][this.value[1]].name}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.comTime {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(#000, 0.5);

		.popBox {
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.cha {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 48rpx;
			}

			.tit {
				font-weight: 500;
				font-size: 30rpx;
				color: #000;
				margin-bottom: 30rpx;
			}

			.content {
				width: 100%;

				.picker-view {
					width: 100%;
					height: 300rpx;
					margin-top: 20rpx;
				}

				.item {
					line-height: 100rpx;
					text-align: center;
					font-weight: 400;
					font-size: 30rpx;
					color: #000;
				}

				/deep/.uni-picker-view-mask {
					background: none;
				}

				.uni-picker-view-indicator:before {
					border-top: 2rpx solid #EBEFF2;
				}

				.uni-picker-view-indicator:after {
					border-bottom: 2rpx solid #EBEFF2;
				}
			}

			.btns {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				text {
					font-weight: 500;
					font-size: 30rpx;
					width: 336rpx;
					height: 90rpx;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&.err {
						background: #F2F6FA;
						color: #787C80;
					}

					&.succ {
						background: linear-gradient(90deg, #D2EF41 0%, #A4DD53 100%);
						color: #5E960F;
					}
				}
			}
		}
	}
</style>